// var obj = new Object();
var obj = document.createElement("div"); //用作事件广播
function loadjs(src) {
  //用来引入外部js文件
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = src;
  script.onload = document.onreadystatechange = function(e) {
    if (this.readyState === "complete") {
      var event = new Event("123");
      obj.dispatchEvent(event);
    }
  };
  document.getElementsByTagName("head")[0].appendChild(script);
}

loadjs("./js/wangEditor.js"); //导入wangEditor.js
loadjs("./js/upload.js");





let cont = document.getElementById("cont"); //放置编辑器和预览的容器
cont.style.width = "100%";
cont.style.height = "100%";
cont.style.position = "absolute";
cont.style.background = "#333";
cont.style.overflow = "hidden";
cont.style.top = "0";
cont.style.left = "0";

let editor = document.createElement("div"); //文章编辑器
editor.style.float = "right";
editor.style.width = "70%";
editor.style.height = "50%";
editor.style.background = "#fff";
editor.style.margin = "5% 5% 0 0";

let content = document.createElement("div"); //文章预览
content.style.width = "350px";
content.style.height = "640px";
content.style.borderRadius = "6px";
content.style.margin = "5% 0 10px 2%";
content.style.padding = "0 5px";
content.style.background = "#fff";

cont.appendChild(editor);
cont.appendChild(content);



obj.addEventListener("123", function() {
  let contentJSON = null; //用来存放json格式文章
  let contentHTML = null; //用来存放文章html

  // console.log(window.wangEditor)
  // let editor = document.getElementById('editor');//编辑区域
  // let content = document.getElementById('content');//显示区域
  let e = window.wangEditor;
  let ed = new e(editor);
  ed.customConfig.uploadImgServer = "http://127.0.0.1";
  ed.customConfig.uploadImgParams = {
    //添加上传图片参数
  };

  ed.customConfig.uploadImgHeaders = {
    //自定义上传文件头
  };

  ed.customConfig.uploadImgHooks = {
    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

    before: function(xhr, editor, files) {
      // 图片上传之前触发
      // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
      // return {
      //     prevent: true,
      //     msg: '放弃上传'
      // }
    },
    success: function(xhr, editor, result) {
      // 图片上传并返回结果，图片插入成功之后触发
    },
    fail: function(xhr, editor, result) {
      throw "图片插入失败";
    },
    error: function(xhr, editor) {
      throw "图片上传出错";
    },
    timeout: function(xhr, editor) {
      throw "图片上传超时";
    },

    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
    customInsert: function(insertImg, result, editor) {
      //自定义插入图片事件
      // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
      // var url = result.url
      // insertImg(url)
      // result 必须是一个 JSON 格式字符串！！！否则报错
    }
  };

  // ed.customConfig.customUploadImg = function(files,insert){  //自定义上传文件事件
  //   //files是被选中的文件列表
  //   //insert是将图片url插入编辑器的方法  insert(url)
  //   console.log(files)

  // };

  ed.create();
  ed.customConfig.pasteFilterStyle = false;
  let dom = ed.$textElem[0];
  dom.parentNode.style.height = "90%";

  // ed.txt.html('请输入内容');

  editor.addEventListener("input", function() {
    content.innerHTML = ed.txt.html();
    let json = ed.txt.getJSON();

    /**
     * 文章样式预设
     *
     */
    let p = content.getElementsByTagName("p"); //获取文章段落标签
    let doms = content.childNodes; //获取文章标题标签
    for (var i = 0; i < p.length; i++) {
      p[i].style.padding = "0 5px";
      let img = p[i].getElementsByTagName("img")[0]; //获取文章图片标签
      if (img != undefined) {
        img.style.width = "100%";
      }
    }
    for (var i = 0; i < doms.length; i++) {
      doms[i].style.wordWrap = "break-word";
      doms[i].style.wordBreak = "normal";
    }
    contentHTML = ed.txt.html();
    contentJSON = ed.txt.getJSON();
  });

  /**
   * 发表文章
   */
  let btn = document.createElement("button");
  btn.innerText = "发布";
  btn.style.width = "60px";
  btn.style.height = "25px";
  btn.style.position = "absolute";
  btn.style.right = "10%";
  btn.style.bottom = "30%";
  cont.appendChild(btn);

  btn.onclick = function() {
    if(contentHTML===null&&contentJSON===null){
      alert('文章不能为空')
    }else{
      //准备发布文章  此处为发布文章的位置
      console.log(contentJSON)
      alert(ed.txt.text())
      delHTML()
    }
  };


  /**
   * 清空文章内容
   */
  var delHTML = function(){    
    contentHTML = null;
    contentJSON = null;
    ed.txt.html('');
    content.innerHTML = '';
  }

});


